<template>
    <div class="app-container">
        <div class="title">绩效考核列表</div>
        <div class="add-btn">
            <el-button @click="add()" type="primary" icon="plus">新增绩效考核</el-button>
            <el-button @click="exportTable()" type="success" style="float:right">下载</el-button>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column fixed prop="name" label="绩效考核名称" align="center" />
                <el-table-column prop="num" label="考核人数" align="center" />
                <el-table-column prop="createName" label="创建人" align="center" />
                <el-table-column prop="createTime" label="创建时间" align="center" />
                <el-table-column fixed="right" label="操作" align="center" width="200">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="reView(scope.row.id)">查看</el-button>
                        <el-button link type="primary" size="small" @click="handleClick(scope.row.id)">编辑</el-button>
                        <el-popconfirm
                            confirm-button-text="删除"
                            cancel-button-text="取消"
                            icon-color="#626AEF"
                            title="确认删除?"
                            @confirm="confirmEvent(scope.row.id)"
                        >
                            <template #reference>
                                <el-button link type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 新增 -->
        <new-page v-if="dialogVisible" :pageId="pageId" :pageState="pageState" @submit="submit" @closeNew="closeNew" />
    </div>
</template>
<script setup>
import { getNameList, deleteTargetExamine, exportData } from '@/api/kpi/list.js'
import newPage from './components/new.vue';
const dialogVisible = ref(false)
const tableData = ref()
const pageState = ref() // 0:新增 1:查看 2:编辑
const pageId = ref("") // 表格行id
const { proxy } = getCurrentInstance();

// 获取列表
function getList() {
    getNameList().then(res => {
        if(res.code == 200){
            tableData.value = res.rows
        }
    })
}
// 新增
function add () {
    console.log('新增')
    pageState.value = 0;
    dialogVisible.value = true;
}
// 编辑
function handleClick (id) {
    console.log('编辑')
    pageId.value = id;
    pageState.value = 2;
    dialogVisible.value = true
}
// 新增弹框确认
function submit () {
    console.log('提交')
    dialogVisible.value = false;
    getList()
}
// 新增页面关闭
function closeNew () {
    dialogVisible.value = false;
}
// 查看
function reView(id) {
    pageId.value = id;
    pageState.value = 1;
    dialogVisible.value = true;
}
// 删除指标
function confirmEvent (id) {
    deleteTargetExamine(id).then(res=>{
        if(res.code == 200){
            ElMessage({
                message: '删除成功!',
                type: 'success',
                plain: true,
            })
            getList()
        }
    })
}
// 下载
function exportTable (){
    proxy.download("performance/examine/export", {}, `绩效考核.xlsx`);
}
getList()
</script>
<style lang="scss" scoped>
.title {
    border-bottom: 1px solid #ddd;
}
.add-btn {
    margin: 10px 0;
}
</style>